<center>
    <div style="background: gray; width: 100%;height: 800px;padding-top: 30px;display: none;position: absolute;z-index: 100"id="editDiv">
        <div id="editLevelDiv"  style="width: 80%;height: 80%; opacity:1.0">
            <table  border="1">
                <tr align="center">
                    <th>等级</th>
                    <th>名称</th>
                    <th>语言类型</th>
                    <th>时间</th>
                    <th>步数</th>
                    <th>属下</th>
                    <th>操作</th>
                </tr>
                    <tr align="center">
                        <td><input name="degree" style="width: 60px" value="{{degree}}"/></td>
                        <td><input name="name" style="width: 60px" value="{{name}}"/></td>
                        <td><input name="type" style="width: 60px" value="{{type}}"/></td>
                        <td><input name="time" style="width: 60px" value="{{time}}"/></td>
                        <td><input name="step" style="width: 60px" value="{{step}}"/></td>
                        <td id="numtd">
                                <select name="selectName">
                                        {{#each people}}
                                            <option value="{{name}}">{{name}}</option>
                                        {{/each}}
                                </select>X<input  style="width: 30px;"/>
                        </td>
                        <td>
                            <button   style="width: 50px;height: 30px;" name="save">保存</button><br/>
                            <button   style="width: 50px;height: 30px;" name="cancel">取消</button>
                        </td>
                    </tr>
            </table>
        </div>
    </div>
</center>
<br>
<table  border="1">
    <tr align="center">
        <th>等级</th>
        <th>名称</th>
        <th>语言类型</th>
        <th>时间</th>
        <th>步数</th>
        <th>属下</th>
        <th>操作</th>
    </tr>
    {{#each level}}
        <tr align="center" name="level" title="{{_id}}" id="{{degree}}:{{name}}:{{type}}:{{time}}:{{step}}:{{enemy}}">
            <td>{{degree}}</td>
            <td>{{name}}</td>
            <td>{{type}}</td>
            <td>{{time}}</td>
            <td>{{step}}</td>
            <td name="td">
            </td>
            <td>
                <button title="{{_id}}" style="width: 50px;height: 30px;" name="delete">删除</button><br>
                <button title="{{_id}}" style="width: 50px;height: 30px;" name="edit">编辑</button>
            </td>
        </tr>
    {{/each}}
</table>
<br/>
<p>等级：</p>
<input type="text" style="width: 150px;height: 20px" id="degree"/>
<p>名称：</p>
<input type="text" style="width: 150px;height: 20px" id="name1"/>
<p>选择语言类型</p>
<select id="type">
    {{#each type}}
        <option value="{{name}}">{{name}}</option>
    {{/each}}
</select>
<p>时间：</p>
<input type="text" style="width: 150px;height: 20px" id="time"/>
<p>步数：</p>
<input type="text" style="width: 150px;height: 20px" id="step"/>
<p>属下：(以换行分割)</p>
<textarea id="enemy" style="width: 300px;height: 200px" ></textarea><br/><br/>
<button id="submit" style="width: 50px;height: 30px">提交</button>
<script>
    var xhr;
    var btn=document.getElementById("submit");
    var type=document.getElementById("type");
    var degree=document.getElementById("degree");
    var name1=document.getElementById("name1");
    var time=document.getElementById("time");
    var step=document.getElementById("step");
    var enemy=document.getElementById("enemy");
    var deletebtnArr =document.getElementsByName("delete");
    var editbtnArr =document.getElementsByName("edit");
    var editLevelDiv = document.getElementById("editDiv");
    var cancelBtnArr =document.getElementsByName("cancel");
    var saveBtnArr =document.getElementsByName("save");
    var editDegreeArr =document.getElementsByName("degree");
    var editNameArr =document.getElementsByName("name");
    var editTypeArr =document.getElementsByName("type");
    var editTimeArr =document.getElementsByName("time");
    var editStepArr =document.getElementsByName("step");
    var levelArr =document.getElementsByName("level");
    var itemID;
    var  str="";
//    function bubbleSort(arr) {
//        var  degreeArr =new  Array;
//        for(var a=0;a<arr.length;a++)
//        {
//            var array = arr[a].id.split(":");
//            degreeArr.push(array[0]);
//
//        }
//        var i = degreeArr.length, j;
//        var tempExchangVal;
//        while (i > 0) {
//            for (j = 0; j < i; j++) {
//                if (degreeArr[j] > degreeArr[j + 1]) {
//                    tempExchangVal = arr[j];
//                    arr[j] = arr[j + 1];
//                    arr[j + 1] = tempExchangVal;
//                }
//            }
//            i--;
//        }
//        return arr;
//    }
    for(var j=0;j<levelArr.length;j++)
    {
        var array = levelArr[j].id.split(":");

//        var  arr =bubbleSort(levelArr);

        var array1 = JSON.parse(array[5]);
        if(array1.length==1)
        {
            str="";
            str+= "<ul>"+array1[0][0]+"</ul><br/>X<br/><ul>"+array1[0][1]+"</ul>";
            document.getElementsByName('td')[j].innerHTML = str;
            str="";
        }else
        {
            for(var  i=0;i<array1.length;i++)
            {
                str+= "<ul>"+array1[i][0]+"</ul><br/>X<br/><ul>"+array1[i][1]+"</ul>";
                document.getElementsByName('td')[j].innerHTML = str;
            }
        }
    }
    saveBtnArr[0].onclick =function()
    {
        var inputNameArr =document.getElementsByName("selectName");
        var inputCountArr =document.getElementsByName("inputCount");
        var  content={};
        content.id = itemID;
        content.degree =editDegreeArr[0].value;
        content.name =editNameArr[0].value;
        content.type =editTypeArr[0].value;
        content.time =editTimeArr[0].value;
        content.step =editStepArr[0].value;
        var arrEnemy =new  Array;
        for(var j=0;j<inputNameArr.length;j++)
        {
            arrEnemy.push({"name":inputNameArr[j].value,"count":inputCountArr[j].value});
        }
        for(var index in inputNameArr)
        {
            if(index.value=="")
            {
                alert("不能有空的选项");
                return;
            }
        }
        content.enemy =arrEnemy;
        xhr=new XMLHttpRequest();
        xhr.onreadystatechange=state_Edit;
        xhr.open("PUT","addLevel",true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(content));
    }
    cancelBtnArr[0].onclick=function()
    {
        editLevelDiv.style.display="none";

    }
    for(var i=0;i<editbtnArr.length;i++)
    {
        editbtnArr[i].onclick=(function(index)
        {
            return function()
            {
                var array = levelArr[index].id.split(":");
                editDegreeArr[0].value =array[0];
                editNameArr[0].value =array[1];
                editTypeArr[0].value =array[2];
                editTimeArr[0].value = array[3];
                editStepArr[0].value =array[4];
                var enemtArr = JSON.parse(array[5]);
                var str1 = '';
               for(var j=0;j<enemtArr.length;j++)
               {
                   str1+= "<input name='selectName' style='width: 30px;'value='"+enemtArr[j][0]+"'/>X<input name='inputCount' style='width: 30px;'value='"+enemtArr[j][1]+"'/>";
               }
                document.getElementById('numtd').innerHTML = str1;
                itemID =levelArr[index].title;
                editLevelDiv.style.display="block";
            }
        })(i);
    }
    for(var i=0;i<deletebtnArr.length;i++)
    {
        deletebtnArr[i].onclick=(function(index)
        {
            return function()
            {
                if(confirm('确定删除?'))
                {

                }
                else
                {
                    return;
                }
                var idContent={};
                idContent.id =deletebtnArr[index].title;
                xhr=new XMLHttpRequest();
                xhr.onreadystatechange=state_Delete;
                xhr.open("DELETE","addLevel",true);
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.send(JSON.stringify(idContent));
            }
        })(i);
    }
    btn.onclick=function()
    {
        if(degree.value=="")
        {
            alert("请添加等级");
            return;
        }
        else if(name1.value=="")
        {
            alert("请添加名称");
            return;
        }
        else if(time.value=="")
        {
            alert("请添加时间");
            return;
        }
        else if(step.value=="")
        {
            alert("请添加步数");
            return;
        }
        else if(enemy.value=="")
        {
            alert("请添加属下");
            return;
        }
        var arrEnemy=[];
        var arrTemp=enemy.value.split("\n");
        if(arrTemp.length==0)
        {
            alert("步数添加不正确");
            return;
        }
        for(var index in arrTemp)
        {
            var arrTemp1=arrTemp[index].split(" ");
            if(arrTemp1.length<2)
            {
                alert("步数添加不正确");
                return;
            }
            arrEnemy.push({"name":arrTemp1[0],count:arrTemp1[1]});
        }
        var content={};
        content.type=type.value;
        content.name=name1.value;
        content.degree=degree.value;
        content.time=time.value;
        content.step=step.value;
        content.enemy=arrEnemy;
        xhr=new XMLHttpRequest();
        xhr.onreadystatechange=state_Change;
        xhr.open("POST","addlevel",true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(content));
    }
    function state_Change()
    {
        if (xhr.readyState==4)
        {
            if (xhr.status==200)
            {
                alert("添加成功");
                location.reload(true);
            }
            else
            {
                alert("添加失败");
            }
        }
    }
    function state_Edit()
    {
        if (xhr.readyState==4)
        {
            if (xhr.status==200)
            {
                alert("修改成功");
                location.reload(true);
            }
            else
            {
                alert("修改失败");
            }
        }
    }
    function state_Delete()
    {
        if (xhr.readyState==4)
        {
            if (xhr.status==200)
            {
                alert("删除成功");
                location.reload(true);
            }
            else
            {
                alert("删除失败");
            }
        }
    }
</script>